<!--
@function: 这是一个树面板
@author:HYS
@description:
1.描述
    还有很多需要添加的内容
2.设置
    panelTitle:String 冒泡
    hasToolbar:Boolean 冒泡
    treeData:Array 树的数据，具体参见element-ui tree
    expandAll:Boolean 展开所有
    checkable:Boolean 节点可选
3.事件
    check-change: 选中节点改变后触发
    
-->
<template>
<simple-panel :panelTitle="panelTitle" :hasToolbar="hasToolbar" class="tree-panel-container">
  <template slot="toolbar">
     <slot name="toolbar"></slot>
  </template>
  <template slot="main">
    <div class="el-tree-container">
      <el-tree
        :data="treeData"
        :show-checkbox="checkable"
        node-key="id"
        ref="tree"
        highlight-current
        @click="expandTree"
        :default-expand-all="expandAll"
        :props="defaultProps"
        @check-change="$emit('check-change', $event)">
      </el-tree>
    </div>
  </template>
</simple-panel>
</template>
<script>
import SimplePanel from "./SimplePanel.vue";

export default {
  name: "tree-panel",
  components: {
    "simple-panel": SimplePanel
  },
  props: {
    panelTitle: {// 冒泡
      type: String,
      default: ""
    },
    hasToolbar: {// 冒泡
      type: Boolean,
      default: false
    },
    treeData:{// 树的数据
      type:Array,
      default:()=>{
        return [];
      }
    },
    expandAll:{// 展开所有
      type:Boolean,
      default:false
    },
    checkable:{// 节点可选
      type:Boolean,
      default:true
    }
  },
  methods:{
    getCheckedNodes(leafOnly) {
      return this.$refs.tree.getCheckedNodes(leafOnly);
    },
    getCheckedKeys(leafOnly) {
      return this.$refs.tree.getCheckedKeys(leafOnly);
    },
    setCheckedNodes:function(nodes){
      this.$refs.tree.setCheckedNodes(nodes);
    },
    setCheckedKeys:function(keys, leafOnly=false) {
      this.$refs.tree.setCheckedKeys(keys, leafOnly);
    },
    clearChecked:function(){
      this.$refs.tree.setCheckedKeys([]);
    },expandTree(){
      for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
         this.$refs.tree.store._getAllNodes()[i].expanded=true;
      }
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
}
</script>
<style lang="scss">
@import "../../assets/scss/basic.scss";
.tree-panel-container{
  height: 100%;

  .el-tree-container{
    height: 99%;
    background-color: #fff;
    border: 1px solid #ebeef5;
  }
}
</style>
